<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll my liushuihao">
            <group style="margin-bottom: 0.1rem">
                <cell title="选择打款方式" is-link @click.native="onClick">
                    <div>
                        <span style="color: #dbdbdb">{{model}}</span>
                    </div>
                </cell>
            </group>
            <group v-show="model != '请选择打款方式'">

                <x-input title="充值金额" type="number" placeholder="请输入充值金额" novalidate :show-clear="false" text-align="right"  placeholder-align="right" v-model="amount"></x-input>
                <x-input title="银行名称" v-show="check[0] == '1'" placeholder="请输入银行名称" novalidate :show-clear="false" text-align="right"  placeholder-align="right" v-model="bankName"></x-input>
                <x-input :title="check[0] != '1'?'订单号':'流水号'" placeholder="请输入流水号" novalidate :show-clear="false" text-align="right"  placeholder-align="right" v-model="liushuihao"></x-input>
                <!--<x-input title="订单号" v-show="check[0] != '1'" placeholder="请输入订单号" novalidate :show-clear="false" text-align="right"  placeholder-align="right" v-model="orderId"></x-input>-->
                <x-input title="姓名" placeholder="请输入姓名" novalidate :show-clear="false" text-align="right"  placeholder-align="right" v-model="transferUserName"></x-input>
                <x-input title="打款账号" placeholder="请输入打款账号" novalidate :show-clear="false" text-align="right"  placeholder-align="right" v-model="zhanghao"></x-input>
                <datetime format="YYYY-MM-DD HH" placeholder="请选择打款时间" v-model="value" :compute-hours-function="computeHoursFunction" title="打款时间" @on-change="onChange"></datetime>
            </group>
            <div class="foot_add content" v-on:click="gotoPage">
                <button :class="disabled" :disabled="disabled != ''" class="btns">提交</button>
            </div>
        </div>
        <div style="display: block;width: 100%;
height:100%;background: rgba(0,0,0,0.3);position: absolute;bottom:0;left: 0;" v-show="show" class="pay_method"
             @click.self="closePay">
            <div style="bottom: 0;position: absolute;left:0;width:100%;transition:all 0.5s;background-color: #fff"
                 :class="show ? 'show' : ''">
                <checklist :options="commonList" label-position="left" :max="1" :min="1" v-model="checks" ></checklist>

                <button class="btns" @click="payMoney" style="position: static">付款</button>
            </div>
        </div>

    </div>
</template>
<script>
    import { XInput,Cell, Group,Datetime,Checklist} from 'vux'

    export default {
        components: {
            XInput,
            Group,
            Datetime,
            Cell,
            Checklist
        },
        name:"rechargeMethod",
        data(){
            return{
                amount:'',
                liushuihao :'',
                bankName:'',
                orderId:'',
                zhanghao:'',
                transferUserName:'',
                disabled : 'disabled',
                daterangeFormat:'YYYY/MM/DD',
                value: '',
                show: false,
                model:'请选择打款方式',
                checks:[1],
                check:'',
                computeHoursFunction (date, isToday, generateRange) {
                    return generateRange(0, 23)
                },
                commonList: [
                    {key: '1', value: '<span class="bankInfo_icon" style="margin-right:0.22rem "></span>银行卡'},
                    {key: '3', value: '<span class="wx_s_icon" style="margin-right:0.22rem "></span>微信'},
                    {key: '2', value: '<span class="alipay_s_icon" style="margin-right:0.22rem "></span>支付宝'},
                ],
            }
        },
        activated(){
            this.init();
        },
        methods:{
            init(){
                this.amount = '';
                this.liushuihao = '';
                this.bankName = '';
                this.orderId = '';
                this.disabled = 'disabled';
                this.zhanghao = '';
                this.transferUserName = '';
                this.value = '';
                this.show=false;
                this.model='请选择打款方式';
                this.checks=[1];
                this.check = ''
            },
            inits(){
                this.amount = '';
                this.liushuihao = '';
                this.bankName = '';
                this.orderId = '';
                this.disabled = 'disabled';
                this.zhanghao = '';
                this.value = '';
            },
            onClick(){
                this.show=true;
            },
            payMoney(){
                console.log(this.check==this.checks)
                if(this.check == this.checks){
                    this.show=false;
                    return;
                }
                this.inits();
                this.check = this.checks;
                if(this.check == 1){
                    this.model = "银行卡"
                }else if(this.check == 2){
                    this.model = "支付宝";
                    this.bankName = "支付宝";
                }else if(this.check == 3){
                    this.model = "微信";
                    this.bankName = "微信";
                }else {
                    this.model = "请选择打款方式"
                }
                this.show = false
            },
            closePay() {
                this.show = false
            },
            validate(){
                if(this.check == 1 && this.amount.trim() && this.liushuihao.trim() && this.bankName.trim() && this.zhanghao.trim() && this.value.trim() && this.transferUserName.trim()){
                    this.disabled = ''
                }else if(this.check == 2 && this.amount.trim() && this.zhanghao.trim() && this.value.trim() && this.transferUserName.trim()){
                    this.disabled = ''
                }else if(this.check == 3 && this.amount.trim() && this.zhanghao.trim() && this.value.trim() && this.transferUserName.trim()){
                    this.disabled = ''
                }else{
                    this.disabled = "disabled";
                }
            },
            gotoPage(){
                this.underlineBalanceRechargePay();
            },

            //线下充值
            underlineBalanceRechargePay(){
                this.$ajax.finance.underlineBalanceRechargePay({
                    amount:this.amount.trim(),
                    bank:this.bankName.trim(),
                    bankStatement:this.liushuihao.trim(),
                    account:this.zhanghao.trim(),
                    transferTime:this.value.trim(),
                    transferUserName:this.transferUserName.trim(),
                }).then((res)=>{
                    this.$router.replace({ path: '/success',query:{
                            goUrl:"",
                            type:0,
                            title:'提交成功',
                            text:'提交成功,等待审核',
                            backUrl:'',

                      }});
                })
            },
            onChange (val) {
            }
        },
        watch:{
            amount:function () {
                this.validate();
            },
            liushuihao:function () {
                this.validate();
            },
            bankName:function () {
                this.validate();
            },
            zhanghao:function () {
                this.validate();
            },
            value:function () {
                this.validate();
            },
            orderId:function () {
                this.validate();
            },
            transferUserName:function () {
                this.validate();
            }

        }
    }
</script>
<style scoped>
    .btns {
        width: 90%;
        height: 0.8rem;
        margin: 0.2rem 5%;
        border-radius: 0.08rem;
        font-size: 0.32rem;
        color: #fff;
    }
</style>
<style>

    .liushuihao .vux-cell-placeholder{
        color: #dbdbdb;
    }
</style>